<template>
    <div id="content">
        <div class="cinema_body">
            <ul v-if='list.length'>
                <li v-for="item in list" :key="item.id">
                    <div>
                        <span>{{item.name}}</span>
                        <span class="q"><span class="price">{{item.minPrice/100}}</span> 元起</span>
                    </div>
                    <div class="address">
                        <span>{{item.addr}}</span>
                        <span>{{item.distance}}</span>
                    </div>
                    <div class="card">
                        <!-- v-for不跟v-if连用，所以用v-show,当val为1的才显示，0的不显示 -->
                        <div v-for="(val,key) in item.discounts" 
                        :key="key" 
                        v-show='val'
                        :class='key|color'
                        >
                            {{key|text}} 
                        </div>
                    </div>
                </li>
            </ul>
            <van-loading class='loading-bg' type='spinner' color="#3c9fe6" v-show='loading' />
        </div>
    </div>
</template>

<script>
export default {
    name:"CiList",
    data(){
        return{
            list:[],
            loading:false
        }
    },
    async created(){
        this.loading = true;
        let res = await this.$axios.get('/api/cinema');
        this.list = res.data.list;
        this.loading = false
    },
    filters:{
        // 返回出对应的中文
        text(key){
            let textObj = {
                'allowRefund':'认证',
                'buyout':'上市',
                'cityCardTag':'城市名片',
                'deal':'政策',
                'endorse':'促销',
                'hallTypeVOList':'人气',
                'sell':'销量',
                'snack':'小吃',
                'vipTag':'折扣卡'
            }
            return textObj[key]
        },
        //返回出对应的颜色
        color(key){
             let colorObj = {
                'allowRefund':'or',
                'buyout':'or',
                'cityCardTag':'or',
                'deal':'or',
                'endorse':'bl',
                'hallTypeVOList':'bl',
                'sell':'bl',
                'snack':'bl',
                'vipTag':'bl'
            }
            return colorObj[key]
        }
    }
}
</script>

<style scoped>
#content .cinema_body{ flex:1; overflow:auto;}
.cinema_body ul{ padding:20px;}
.cinema_body li{  border-bottom:1px solid #e6e6e6; margin-bottom: 20px;}
.cinema_body div{ margin-bottom: 10px;}
.cinema_body .q{ font-size: 11px; color:#f03d37;}
.cinema_body .price{ font-size: 18px;}
.cinema_body .address{ font-size: 13px; color:#666;}
.cinema_body .address span:nth-of-type(2){ float:right; }
.cinema_body .card{ display: flex;}
.cinema_body .card div{ padding: 0 3px; height: 15px; line-height: 15px; border-radius: 2px; color: #f90; border: 1px solid #f90; font-size: 13px; margin-right: 5px;}
.cinema_body .card div.or{ color: #f90; border: 1px solid #f90;}
.cinema_body .card div.bl{ color: #589daf; border: 1px solid #589daf;}
.cinema_body .loading-bg{
    text-align: center;
    line-height: 600px;
   
}
</style>